<script setup lang="ts">
import MsgRequest from '@/request/msgRequest';
import { useAppStore } from '@/store';

interface IProps {
  activeTab: string;
}

const props = defineProps<IProps>();
const tabItems = ref([
  { id: 1, title: '首页', icon: 'i-hugeicons:home-05', dot: false, path: '/pages/home/index' },
  { id: 2, title: '设备', icon: 'i-tabler:cpu', dot: false, path: '/pages/equipment/index' },
  { id: 3, title: '订单', icon: 'i-lsicon:work-order-info-filled', dot: false, path: '/pages/order/index' },
  { id: 4, title: '消息', icon: 'i-tabler:message-dots', dot: false, path: '/pages/message/index' },
  { id: 5, title: '我的', icon: 'i-icon-park-outline:me', dot: false, path: '/pages/person/index' },
]);
const activeTab = ref<string>(props.activeTab);

onShow(() => {
  if (useAppStore().$state.token) {
    MsgRequest.CheckoutIsReadCount({}).then((res) => {
      if (res.data === 0) return;
      tabItems.value = tabItems.value.map((item) => {
        if (item.id === 4) {
          return { ...item, dot: true };
        }
        return item;
      });
    });
  }
});

/**
 * tabber 主界面跳转
 * @param url
 */
const handleTabbarChange = (url: string) => {
  uni.switchTab({ url });
};
</script>

<template>
  <van-tabbar v-model:active="activeTab" :placeholder="true">
    <van-tabbar-item v-for="item in tabItems" :key="item.id" :name="item.title" :dot="item.dot" @click="() => handleTabbarChange(item.path)">
      <i slot="icon" :class="item.icon" class="color-[#49484] w-[26px] h-[26px]" />
      <i slot="icon-active" :class="item.icon" class="c-color w-[26px] h-[26px]" />
      <text :class="item.title === activeTab ? 'c-color' : 'color-[#49484]'">{{ item.title }}</text>
    </van-tabbar-item>
  </van-tabbar>
</template>
